<template>
	<div class="precisionMarketing">
		<div class="banner">
			<h1>精准营销，让营销更智能</h1>
			<p>智加云提供独一无二的线下数据管理和精准营销服务</p>
		</div>
		<div class="container1">
			<div class="title">关于精准营销</div>
			<p>通过AI机器学习，进行数据清洗并运用科学算法整理用户画像，用户特征标签化，智加云提供独一无二的线下数据管理和精准营销服务。构建线下场景数据中心，助力商家营销效果提升和优化。</p>
			<img src="./img/product_aboutjzyx_content1@3x.png" alt="">
		</div>
		<div class="container2">
			<div class="title">场景覆盖，精准人群识别</div>
			<img src="./img/product_aboutjzyx_content2@3x.jpg" alt="">
		</div>
	</div>
	
</template>

<script>
	export default {
		name: 'precisionMarketing',
	}
</script>

<style lang="stylus" scoped>
	.precisionMarketing{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_aboutjzyx_banner@3x.png') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 53.6%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			height: 10.91rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333;
				margin: 0.6rem 0 0.5rem 0;
			}
			img{
				width: 5.91rem;
				height: 5.39rem;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				padding: 0 6%;
				margin-bottom: 0.8rem;
			}
		}
		.container2{
			width: 100%;
			height: 6.7rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			.title{
				font-size: 0.36rem;
				color: #333;
				margin: 0.6rem 0 0.5rem 0;
			}
			img{
				width: 100%;
				height: 4.4rem;
			}
		}
	}
</style>

